<template>
  <!-- 自定义表格 -->
  <custom-table
    ref="customTableRef"
    row-key="id"
    :columns="columns"
    :api="channelManageCRUD.page"
    column-controller-key="channelManageList"
  >
    <template #topContent>
      <div style="margin-bottom: var(--td-comp-margin-xxl)">
        <t-button @click="handleOpenDialog('create', {})"> 新建渠道 </t-button>
      </div>
    </template>
    <template #createTime="{ row }">
      {{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
    </template>
    <template #operation="{ row }">
      <t-space>
        <t-link theme="primary" @click="handleOpenDialog('read', { id: row.id })"> 详情 </t-link>
        <t-link theme="primary" @click="handleOpenDialog('update', { id: row.id })"> 编辑 </t-link>
        <t-popconfirm content="确认要删除该项吗？" @confirm="handleDelete({ id: row.id })">
          <t-link theme="danger"> 删除 </t-link>
        </t-popconfirm>
      </t-space>
    </template>
  </custom-table>
  <!-- 自定义对话框 -->
  <custom-dialog
    ref="customDialogRef"
    v-slot="{ formData, readonly }"
    :api-map="channelManageCRUD"
    header="*渠道"
    @request-success="handleDialogRequestSuccess"
  >
    <t-form-item label="渠道名称" name="name" :rules="[{ required: true, message: '请输入渠道名称' }]">
      <t-input
        v-model:value="formData.name"
        placeholder="请输入渠道名称"
        clearable
        :readonly="readonly"
        :maxlength="10"
        show-limit-number
      />
    </t-form-item>
    <t-form-item label="渠道排序" name="sort" :rules="[{ required: true, message: '请输入渠道排序' }]">
      <t-input-number
        v-model:value="formData.sort"
        placeholder="请输入渠道排序"
        clearable
        :readonly="readonly"
        style="width: 100%;"
      />
    </t-form-item>
  </custom-dialog>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import { MessagePlugin, TableCol } from 'tdesign-vue-next';
import { onMounted, useTemplateRef } from 'vue';

import { channelManageCRUD } from '@/api/config/common-config';
import CustomDialog from '@/components/custom/dialog/index.vue';
import CustomTable from '@/components/custom/table/index.vue';

// 自定义表格ref
const customTableRef = useTemplateRef('customTableRef');
// columns
const columns: TableCol[] = [
  { colKey: 'id', title: '渠道ID' },
  { colKey: 'name', title: '渠道名称' },
  { colKey: 'sort', title: '渠道排序' },
  { colKey: 'createTime', title: '创建时间' },
  { colKey: 'operation', title: '操作', width: 150 },
];
// 处理初始化表格
const handleInitTable = () => {
  const params = {};
  customTableRef.value.initTable(params);
};
// 处理刷新表格
const handleRefreshTable = () => {
  customTableRef.value.refreshTable();
};
onMounted(() => {
  handleInitTable();
});
// 自定义对话框ref
const customDialogRef = useTemplateRef('customDialogRef');
// 处理打开对话框
const handleOpenDialog = (mode: 'create' | 'read' | 'update', params: Record<string, any>) => {
  customDialogRef.value.open(mode, params);
};
// 处理对话框请求成功
const handleDialogRequestSuccess = (result: Record<string, any>) => {
  if (result.mode === 'create') handleInitTable();
  if (result.mode === 'update') handleRefreshTable();
};
// 处理删除
const handleDelete = (params: Record<string, any>) => {
  channelManageCRUD
    .delete(params)
    .then(() => {
      MessagePlugin.success('删除成功');
      handleRefreshTable();
    })
    .catch(({ message }) => {
      MessagePlugin.error(message);
    });
};
</script>
